<template>
  <div class="studentInfo">
    <div>
      <div class="title">
        <h1 style="color: #4D7181;font-size: 40px">用户信息</h1>
        <div>
          <CopyOutlined class="icon"/>
          <UserOutlined class="icon"/>
        </div>

      </div>
    </div>
    <div style="border: 2px solid #4D7181; padding: 20px;border-top: 30px solid #4D7181; border-radius: 10px">
      <div style="display: flex">
        <div>
          <a-descriptions :column="2" title="基本信息">
            <a-descriptions-item label="用户昵称">{{ formState.userName }}</a-descriptions-item>
            <a-descriptions-item label="用户账号">{{ formState.account }}</a-descriptions-item>
            <a-descriptions-item label="用户角色">
              {{ getUserRoleText(formState.userRole) }}
            </a-descriptions-item>
            <a-descriptions-item label="用户状态">
              {{ getStatusText(formState.userStatus) }}
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>

    </div>


  </div>

</template>

<script setup>


import {computed, onMounted, reactive, ref} from "vue";
import {useRoute} from "vue-router";
import {queryStudentByIdAPI} from "@/apis/student.js";
import {message} from "ant-design-vue";
import {CopyOutlined, UserOutlined} from "@ant-design/icons-vue";
import {queryUserByIdAPI} from "@/apis/user.js";

// 新增方法用于将回车替换微br空格替换微&nbsp
const truncateText = (text) => {
  return text.replace(/\n/g, '<br>').replace(/ /g, '&nbsp;');
};
//控制状态样式
const getStatusText = (status) => {
  return status === 0 ? '正常' : '封禁';
};
const getStatusColor = (status) => {
  return status === 0 ? 'green' : 'red';
};
const getUserRoleText = (role) => {
  if (role === "enterprise") {
    return "企业";
  } else if (role === "student") {
    return "学生";
  } else if (role === "admin") {
    return "管理员";
  }
};

const route = useRoute()
//定义数据
const formState = reactive({
  userName: '',
  account: '',
  userRole: '',
  userStatus: '',
});

//获取数据
const getData = async (userId) => {
  const res = await queryUserByIdAPI(userId)
  formState.userName = res.data.data.userName;
  formState.account = res.data.data.account;
  formState.userRole = res.data.data.userRole;
  formState.userStatus = res.data.data.userStatus;

}

//时间格式处理
// const formattedFoundationDate = computed(() => {
//   const date = new Date(formState.student_graduation_year);
//   const year = date.getFullYear();
//   const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要加1
//   const day = String(date.getDate()).padStart(2, '0');
//   // const hours = String(date.getHours()).padStart(2, '0');
//   // const minutes = String(date.getMinutes()).padStart(2, '0');
//   // const seconds = String(date.getSeconds()).padStart(2, '0');
//   // return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
//   return `${year}-${month}-${day}`;
// });


//接收路由参数
const userId = ref();
// 生命周期
onMounted(() => {
  userId.value = route.params.userId;
  getData(userId.value)
});


const success = (msg) => {
  message.success(msg);
};


</script>
<style scoped>
.studentInfo {
  margin: 5px;
  padding: 20px 60px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
  border-radius: 30px; /* 你可以调整这个值来改变圆角的大小 */

  .title {
    display: flex;
    justify-content: space-between;

    .icon {
      font-size: 35px;
      padding: 15px;
      color: white;
      margin-right: 20px;
      background-color: #C09E66;
      border-radius: 50px;
      margin-bottom: 10px;
    }
  }

}


</style>